import * as React from 'react';
import {Form, Table} from 'antd';
import {ColumnProps} from 'antd/lib/table';
import {withWrapper} from '../../components/basic';
import * as moment from 'moment';
import {CoinType, CoinStatus,CoinTarget} from '../../enum/coins';
import {COIN_NAME} from '../../config';

const renderTime = (text: string) => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '';


const renderAllPeople = (text: string, record: any): any => {
    if (CoinTarget[record.target] === CoinTarget.assign) {
        return text;
    }

    return <span style={{color: '#40ebf8'}}>所有人</span>
}

const columns: Array<ColumnProps<Table.Data>> = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    fixed: 'left',
}, {
    title: `${COIN_NAME}详情`,
    dataIndex: 'message',
    key: 'message',
    width: 400
}, {
    title: `操作${COIN_NAME}量`,
    dataIndex: 'coin',
    width: 150,
    key: 'coin',
    render: (text: string, record: any): any => {
        if (CoinStatus[record.status] === CoinStatus.add) {
            return (
                <span style={{color: '#46f855'}}>+{text}</span>
            )
        }

        return <span style={{color: '#f8335f'}}>-{text}</span>
    }
}, {
    title: `剩余${COIN_NAME}量`,
    dataIndex: 'coin_remainder',
    width: 150,
    key: 'coin_remainder',
    render: renderAllPeople
}, {
    title: '昵称',
    dataIndex: 'nick_name',
    width: 200,
    key: 'nick_name',
    render: renderAllPeople
}, {
    title: '电话号码',
    dataIndex: 'phone',
    width: 150,
    key: 'phone',
    render: renderAllPeople
}, {
    title: '操作类型',
    dataIndex: 'type',
    width: 250,
    key: 'type',
    render: (text: string) => text ? CoinType[text] : ''
}, {
    title: '添加时间',
    width: 200,
    dataIndex: 'add_time',
    key: 'add_time',
    render: renderTime,
},];


class WrapperTable extends React.Component<any, {}> {
    public render(): any {
        const {onPageChange, datas, pager} = this.props;

        return (
            <Table
                rowKey="id"
                bordered={true}
                dataSource={datas}
                columns={columns}
                pagination={pager}
                scroll={{
                    x: columns.reduce((total: number, val: any): number => {
                        return total + val.width;
                    }, 0)
                }}
                onChange={onPageChange}
            />
        )
    }
}

export default withWrapper(Form.create()(WrapperTable));